<script setup>
import { ref, onMounted } from 'vue';
import login from './components/login.vue';
import content from './components/content.vue';

// 页面显示类型 login 和 data
let pageType = ref('login'); // data  login

const changeType = (type) => {
  pageType.value = type;
};

let username = ref('未登录');
const getUsername = (name) => {
  username.value = name;
};

onMounted(() => {
  chrome.storage.local.get(['username'], function (res) {
    if (res['username']) {
      username.value = res['username'];
    }
  });

  chrome.storage.local.get(['cookies'], function (res) {
    if (res['cookies']) {
      pageType.value = 'data';
    }
  });
});
</script>

<template>
  <div class="container">
    <!--  logo  -->
    <header>
      <div class="logo">
        <img src="../assets/logo.png" />
      </div>
    </header>

    <main>
      <!--  登录界面  -->
      <div class="login" v-if="pageType === 'login'">
        <login @changeType="changeType" @username="getUsername" />
      </div>

      <div class="page" v-if="pageType === 'data'">
        <content @changeType="changeType" :username="username" />
        <!--    todo 查重结果界面    -->
      </div>
    </main>

    <!--    <footer>-->
    <!--      <div>acg爱才集团</div>-->
    <!--    </footer>-->
  </div>
</template>

<style lang="scss">
/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
  background-color: rgba(240, 240, 240, 1);
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, 0.5);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
  background-color: rgba(170, 170, 170, 0.5);
}

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

.container {
  width: 400px;
  height: 600px;
  overflow-y: auto;

  main {
    padding: 0 20px 14px 20px;
    margin-bottom: 40px;
  }

  header .logo {
    padding: 10px 0;
    text-align: center;

    img {
      width: 200px;
    }
  }
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
